<%--
  Created by IntelliJ IDEA.
  User: george
  Date: 2016/12/12
  Time: 11:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>home</title>
    <link rel="stylesheet" href="${ctx}/content/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="${ctx}/content/bootstrap/css/bootstrap-theme.css"/>
    <script type="text/javascript" src="${ctx}/content/jquery/jquery.js"></script>
    <script type="text/javascript" src="${ctx}/content/bootstrap/js/bootstrap.js"></script>
</head>
<body>

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label" for="url">URL: </label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="url"
                   value=""/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="client_id">client_id: </label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="client_id" value=""/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="client_secret">client_secret: </label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="client_secret" value=""/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="redirect_uri">redirect_uri: </label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="redirect_uri" value=""/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="response_type">response_type: </label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="response_type" value="code"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="token_url">token_url: </label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="token_url" value=""/>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Generate Code</button>
            <button id="refresh_access_token" class="btn btn-default">ReGenerate Access Token Code</button>
        </div>
    </div>
</form>
<ul class="clearfix"></ul>
<div class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label" for="code">code: </label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="code" value=""/>
        </div>
    </div>
</div>
<div class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label" for="access_token">access_token: </label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="access_token" value=""/>
        </div>
    </div>
</div>
<div class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label" for="refresh_token">refresh_token: </label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="refresh_token" value=""/>
        </div>
    </div>
</div>
<div class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label" for="issued_at">issued_at: </label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="issued_at" value=""/>
        </div>
    </div>
</div>
<iframe id="child" style="display: none;"></iframe>

<script type="text/javascript">
    $(document).ready(function () {
        var oauthData = {};

        if (!oauthData.code)
            $("#refresh_access_token").attr("disabled", "disabled");


        $("form").on("submit", function () {
            oauthData.authorization_url = $("#url").val();
            oauthData.client_id = $("#client_id").val();
            oauthData.client_secret = $("#client_secret").val();
            oauthData.response_type = $("#response_type").val();
            oauthData.redirect_uri = $("#redirect_uri").val();
            oauthData.token_url = $("#token_url").val();

            var url2 = oauthData.authorization_url + "?response_type=" + oauthData.response_type + "&client_id=" + oauthData.client_id + "&redirect_uri=" + oauthData.redirect_uri;
            $("#child").attr("src", url2);

            return false;
        })

        $("#child").on("load", function () {
            oauthData.code = $("#child").contents().find("#code").val();
            $("#code").val(oauthData.code);
            if (oauthData.code)
                $("#refresh_access_token").removeAttr("disabled");
            var data = JSON.stringify({
                "token_url": oauthData.token_url,
                "client_id": oauthData.client_id,
                "client_secret": oauthData.client_secret,
                "redirect_uri": oauthData.redirect_uri,
                "code": oauthData.code
            });
            getToken(data);
        })

        $("#refresh_access_token").on("click", function () {
            var data = JSON.stringify({
                "token_url": oauthData.token_url,
                "client_id": oauthData.client_id,
                "client_secret": oauthData.client_secret,
                "redirect_uri": oauthData.redirect_uri,
                "refresh_token": oauthData.refresh_token
            });
            getToken(data);
        })

        var getToken = function (data) {
            $.ajax({
                url: "/home/access_token",
                type: "post",
                dataType: "json",
                contentType: "application/json",
                data: data,
                success: function (result) {
                    if (result) {
                        if (result.error) {
                            console.log(result.error);
                        } else {
                            oauthData.access_token = result.access_token;
                            oauthData.token_type = result.token_type;
                            oauthData.refresh_token = result.refresh_token;
                            oauthData.issued_at = result.issued_at;
                            $("#code").val(oauthData.code);
                            $("#access_token").val(oauthData.token_type + " " + oauthData.access_token);
                            $("#refresh_token").val(oauthData.refresh_token);
                            var date = new Date(oauthData.issued_at);
                            $("#issued_at").val(date.toLocaleDateString() + " " + date.toLocaleTimeString());
                        }
                    }
                },
                error: function (message) {
                    console.log(message);
                }
            });
        }
    });
</script>
</body>
</html>

